<template>
  <div class="aside_box">
    <el-button @click="openDrawer()">修改</el-button>
    <div>
      <el-menu
        ref="menu"
        :collapse="isCollapse"
        default-active="2"
        :default-openeds="defaultOpends"
        class="el-menu-vertical-demo"
        :collapse-transition="true"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="1">
          <el-icon><icon-menu color="#ffa500" /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu v-for="(list, index) in menuList" :key="index" :index="list.index">
          <template #title>
            <el-icon>
              <component :is="list.icon" color="#ffa500"></component>
            </el-icon>
            <span>{{ list.title }}</span>
          </template>
          <div class="menu_item">
            <div
              v-for="(item, i) in list.children"
              :key="i"
              :style="{ color: item?.active ? 'orange' : '' }"
            >
              {{ item?.title }}
            </div>
          </div>
        </el-sub-menu>
      </el-menu>
    </div>

    <div class="aside_box-collapse" @click="toCollapse">
      <el-icon size="40px" color="#999"><Expand /></el-icon>
    </div>

    <el-drawer v-model="drawerValue" title="I am the title" :with-header="false">
      <ul class="show">
        <li v-for="(item, index) in data" :key="index">
          <div class="inputTitle" @click="changeTitleEdit(index)">
            <input type="text" v-model="item.title" v-if="item.titleEdit" />
            <p v-else>{{ item.title }}</p>
          </div>

          <div class="showlist">
            <div
              class="item"
              v-for="(items, indexs) in item.children"
              @click="changeEdit(index, indexs)"
              :key="indexs"
            >
              <input type="text" v-model="items.title" v-if="items.edit" />
              <p v-else>{{ items.title }}</p>
            </div>
          </div>
        </li>
      </ul>

      <el-button @click="onSubmit()">确认修改</el-button>
    </el-drawer>
  </div>
</template>
<script setup>
import {
  Menu as IconMenu,
  Expand,
  GoodsFilled,
  List,
  HelpFilled,
  Briefcase,
} from '@element-plus/icons-vue'
import { ref, markRaw, onMounted } from 'vue'
onMounted(() => {
  // console.log(`the component is now mounted.`)
})
let menu = ref(null)
let isCollapse = ref(false)
let defaultOpends = ref(['1', '2', '3', '4', '5'])
let menuList = ref([
  {
    title: '经营指导',
    titleEdit: false,
    icon: markRaw(List),
    index: '2',
    children: [
      { title: '经营首页', active: true, edit: false },
      { title: '需求洞察', active: false, edit: false },
      { title: '商品分析', active: false, edit: false },
      { title: '营情分析', active: false, edit: false },
      { title: '流量分析', active: false, edit: false },
      { title: '需求洞察', active: false, edit: false },
      { title: '流量分析', active: false, edit: false },
      { title: '需求洞察', active: false, edit: false },
    ],
  },
  {
    title: '订单管理',
    icon: markRaw(GoodsFilled),
    index: '3',
    children: [
      { title: '预订单', active: false },
      { title: '催单', active: false },
      { title: '商品分析', active: false },
      { title: '营情分析', active: false },
      { title: '流量分析', active: false },
      { title: '需求洞察', active: false },
      { title: '流量分析', active: false },
    ],
  },
  {
    title: '经营指导',
    icon: markRaw(HelpFilled),
    index: '4',
    children: [
      { title: '经营首页', active: false },
      { title: '需求洞察', active: false },
      { title: '商品分析', active: false },
      { title: '营情分析', active: false },
      { title: '流量分析', active: false },
      { title: '需求洞察', active: false },
      { title: '流量分析', active: false },
      { title: '需求洞察', active: false },
    ],
  },
  {
    title: '经营指导',
    icon: markRaw(Briefcase),
    index: '5',
    children: [
      { title: '经营首页', active: false },
      { title: '需求洞察', active: false },
      { title: '商品分析', active: false },
      { title: '营情分析', active: false },
      { title: '流量分析', active: false },
      { title: '需求洞察', active: false },
      { title: '流量分析', active: false },
      { title: '需求洞察', active: false },
    ],
  },
])

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
const toCollapse = () => {
  console.log(isCollapse.value)
  if (!isCollapse.value) {
    defaultOpends.value.map((item) => {
      menu.value.close(item)
    })
  }
  setTimeout(() => {
    isCollapse.value = !isCollapse.value
  }, 1) //做个延迟处理
}

// 以下是那些修改的逻辑
const drawerValue = ref(false)

let data = ref([]) //修改时保存数据

const openDrawer = () => {
  drawerValue.value = true
  data.value = []
  data.value = JSON.parse(JSON.stringify(menuList.value))
}

const changeTitleEdit = (index) => {
  data.value[index].titleEdit = true
}

const changeEdit = (index, indexs) => {
  data.value[index].children[indexs].edit = true
}

// 提交后重置状态
const onSubmit = () => {
  drawerValue.value = false

  for (let index = 0; index < data.value.length; index++) {
    const element = data.value[index]
    element.titleEdit = false

    for (let indexs = 0; indexs < element.children.length; indexs++) {
      const elements = element.children[indexs]
      elements.edit = false
    }
  }
  menuList.value = []
  menuList.value = JSON.parse(JSON.stringify(data.value))
  console.log(JSON.stringify(menuList.value));

}
</script>
<style lang="scss" scoped>
.aside_box {
  overflow: hidden;
  margin: 10px 10px 10px 10px;
  height: calc(100% - 20px - 60px);
  background-color: #fff;
  position: relative;
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
  }

  .aside_box-collapse {
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
    background-color: rgba(#e1e1e1, 0.8);
    position: absolute;
    bottom: 0;
    left: 0;
    &:hover {
      cursor: pointer;
      background-color: rgba(#e1e1e1, 1);
    }
  }

  .el-menu {
    max-height: 80%;
  }

  .menu_item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 30px;
    gap: 10px;

    div {
      width: 40%;
      display: inline-block;
      text-align: left;
      cursor: pointer;
      &:hover {
        color: orange;
      }
    }
  }
}

.show li {
  list-style: none;
}

.showlist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.showlist .item {
  margin-right: 10px;
}
</style>
